<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData">
      <el-form-item label="用户手机号">
        <el-input @blur="searchChange" placeholder="手机号" v-model="formData.mobile" size="small"></el-input>
      </el-form-item>
      <el-form-item label="注册日期">
        <el-date-picker
          v-model="formData.createDate"
          @blur="searchChange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="账户余额">
        <template>
          <div class="remain">
            <el-input v-model="formData.minMoney" size="small" placeholder="最小" @blur="searchChange"></el-input>
            <span style="display: inline-block;padding: 0px 8px">至</span>
            <el-input v-model="formData.maxMoney" size="small" placeholder="最大" @blur="searchChange"></el-input>
          </div>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>用户数量: {{totalCount}}</div>
      <div>今日新增用户数量: {{todayCount}}</div>
      <div>总剩余金额: {{remainTotalMoney}}</div>
      <div>总充值剩余金额: {{remainMoney}}</div>
      <div>总赠送剩余金额: {{remainGiveMoney}}</div>
    </div>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="tableOption"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot-scope="scope"
                slot="status">
        <el-tag v-if="scope.row.status === 0"
                size="small"
                type="danger">禁用</el-tag>
        <el-tag v-else
                size="small">正常</el-tag>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button type="primary"
                   icon="el-icon-edit"
                   size="small"
                   @click.stop="enableDelay(scope.row.id)"
                   class="margin-right-button">开关延长</el-button>
        <div class="margin-bottom-div">
          <el-button type="primary" 
                    icon="el-icon-edit" 
                    size="small" 
                    @click.stop="rechargeHandle(scope.row)">添加赠送余额</el-button>
        </div>
      </template>
    </avue-crud>
    <enable-delay-time ref="enableDelayTime" @refreshDataList="getDataList"></enable-delay-time>
  </div>
</template>

<script>
  import { tableOption } from '@/crud/app-user/user'
  import enableDelayTime from './enable-delay-time.vue'
  export default {
    components: {enableDelayTime},
    data () {
      return {
        dataList: [],
        dataListLoading: false,
        tableOption: tableOption,
        formData: {
          mobile: '',
          createDate: '',
          merchantId: '',
          registerEndTime:'',
          registerStartTime:'',
          minMoney: '',
          maxMoney: ''
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        totalCount: 0,
        todayCount: 0,
        remainTotalMoney: 0,
        remainMoney: 0,
        remainGiveMoney: 0
      }
    },

    mounted () {
      this.getDataList()
    },

    methods: {
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/member/list'),
          method: 'POST',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          this.dataList = data.data.appMemberIPage.records
          this.page.total = data.data.appMemberIPage.total
          this.totalCount=data.data.totalCount
          this.todayCount=data.data.todayCount
          this.remainTotalMoney=data.data.remainTotalMoney
          this.remainMoney=data.data.remainMoney
          this.remainGiveMoney=data.data.remainGiveMoney
          this.dataListLoading = false
        })
      },

      /**
       * 打开充值对话框
       * @param row
       */
      rechargeHandle(row){
        console.info(row)
        this.$prompt('最大添加1000元，此余额不可退', '手动添加赠送余额', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
          inputErrorMessage: '金额不正确',
          inputPlaceholder:'请输入金额'
        }).then(({ value }) => {
          var userId = row.id;
          var giveMoney = value;
          this.$http({
            url: this.$http.adornUrl('/v1/merchant/member/add/member/give/money'),
            method: 'post',
            data: this.$http.adornData({id: userId, giveMoney})
          }).then(res=>{
            if(res.data.code==0){
              this.$message({
                type: 'success',
                message: '操作成功，成功充值'+giveMoney+"元"
              });
              this.getDataList();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });

      },

      // 条件查询
      searchChange () {
        console.log(this.formData)
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.registerStartTime = this.formData.createDate[0]
          this.formData.registerEndTime = this.formData.createDate[1]
        }
        else {
          this.formData.registerStartTime = ''
          this.formData.registerEndTime = ''
        }
        this.page.currentPage=1
        this.getDataList(this.page, this.formData)
      },

      sizeChange(val){
        this.page.pageSize=val
        this.getDataList(this.page, this.formData)
      },
      currentChange(val){
        this.page.currentPage=val
        this.getDataList(this.page, this.formData)
      },
      enableDelay(id){
        this.$refs.enableDelayTime.init(id)
      }
    }
  }
</script>

<style lang="scss">
  .remain{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    input{
      width: 100px;
    }
  }
  .sumary-list{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    div{
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border:solid 1px #009FF1;
      border-radius: 15px;
      margin-right: 10px;
    }
    div:hover{
      color: white;
      background-color: #009FF1;
    }
  }
  .margin-right-button {
    margin-right: 20px;
  }

  .margin-bottom-div {
    margin-top: 10px;
  }
</style>
